import React from 'react';
import DataTable from 'react-data-table-component';
import Card from '@material-ui/core/Card';
import SortIcon from '@material-ui/icons/ArrowDownward';
// import { Primitive } from 'react-data-table-component/dist/DataTable/types';
import { Tooltip } from 'antd';
// import { IAggregate, IAxes } from '../../types';
import { IFulfillmentStatus1, ITableProps } from '../../types/ITable';
import { Dataservice } from '../../services';

export const SimpleTable = React.memo<ITableProps>(function CreateTable(props: ITableProps) {
	const { tableData } = props;
	// const category1 = axes.categories[0];
	// const series1 = axes.series[0].field;
	const getTooltip= function (fieldValue:string):any{
		return (<Tooltip key={fieldValue} placement='top' title={fieldValue}>
			<div title={fieldValue} style={{ width: 280, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{fieldValue}</div></Tooltip>);	
	};
	const columns = [
		{
			id: 'Rule',
			name: 'Rule',
			selector: (row: any) => row.ruleName,
			cell: (row: any) => getTooltip(row.ruleName)
			// (<Tooltip key={row.ruleName} placement='top' title={row.ruleName}><div title={row.ruleName} style={{ width: 280, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{row.ruleName}</div></Tooltip>)
			,
			sortable: true,
			width:'27%'
			// reorder: true,
		},
		{
			name: 'Fulfilments',
			selector: (row: any) => row.ms_nooffulfillment,
			sortable: true,
			width:'20%'
		},
		{
			name: 'Max No',
			selector: (row: any) => row.ms_maxnooffulfillment,
			sortable: true,
			width:'17%'
		},
		{
			name: 'Start Date',
			selector: (row: any) => row.ms_startdate,
			sortable: true,
			// reorder: true,
			cell: (row: any) => Dataservice.FormatDateString(row.ms_startdate),
			width:'18%'
		},
		{
			name: 'End Date',
			selector: (row: any) => row.ms_enddate,
			sortable: true,
			cell: (row: any) => Dataservice.FormatDateString(row.ms_enddate),
			width:'18%'
			// reorder: true,
		}
	];
	const data: IFulfillmentStatus1[] = [
		{
			id: 1,
			Name: 'fulfillment status rule 1 $1000',
			ruleName: 'fulfillment status rule 1 $1000',
			NoOfFulfillment: 10,
			MaxNoOfFulfillment: 10,
			StartDate: '17-Mar-2024',
			EndDate: '17-Mar-2024'
		},
		{
			id: 2,
			Name: 'fulfillment status rule 2 $1000',
			ruleName: 'fulfillment status rule 2 $1000',
			NoOfFulfillment: 6,
			MaxNoOfFulfillment: 10,
			StartDate: '17-Mar-2024',
			EndDate: '17-Mar-2024'
		},
		{
			id: 3,
			Name: 'fulfillment status rule 3 $500',
			ruleName: 'fulfillment status rule 3 $500',
			NoOfFulfillment: 1,
			MaxNoOfFulfillment: 10,
			StartDate: '17-Mar-2024',
			EndDate: '17-Mar-2024'
		},
		{
			id: 4,
			Name: 'fulfillment status rule 4 $300',
			ruleName: 'fulfillment status rule 4 $300',
			NoOfFulfillment: 0,
			MaxNoOfFulfillment: 10,
			StartDate: '17-Mar-2024',
			EndDate: '17-Mar-2024'
		}
	];
	const sortArray =Dataservice.sortTableData(tableData);
	const tableStyle ={};
	return <div className='App' style={{width:'100%',height:'250px'}}>
		<Card>
			<DataTable
				// title='Fulfillment Status'
				columns={columns}
				data={sortArray}
				defaultSortFieldId='name'
				sortIcon={<SortIcon />}
				style={tableStyle}
				fixedHeader
	            fixedHeaderScrollHeight='250px'
				// noHeader={true}
				highlightOnHover
				// pagination={false}
	            // selectableRows={false}
			/>
		</Card>
	</div>;
});
